<template>
  <div class="input-toolbar">
    <button class="tool-btn" title="表情" @click="onEmojiClick">
      <Smile :size="16" />
    </button>
    <button class="tool-btn" title="文件" @click="onFileClick">
      <Paperclip :size="16" />
    </button>
    <button class="tool-btn" title="截图" @click="onScreenshotClick">
      <Scissors :size="16" />
    </button>
    <button class="tool-btn" title="更多" @click="onMoreClick">
      <MoreHorizontal :size="16" />
    </button>
  </div>
</template>

<script lang="ts" setup>
import { Smile, Paperclip, Scissors, MoreHorizontal } from 'lucide-vue-next'

// 定义组件事件
const emit = defineEmits<{
  (e: 'emoji-click'): void
  (e: 'file-click'): void
  (e: 'screenshot-click'): void
  (e: 'more-click'): void
}>()

// 处理表情按钮点击
const onEmojiClick = (): void => {
  emit('emoji-click')
}

// 处理文件按钮点击
const onFileClick = (): void => {
  emit('file-click')
}

// 处理截图按钮点击
const onScreenshotClick = (): void => {
  emit('screenshot-click')
}

// 处理更多按钮点击
const onMoreClick = (): void => {
  emit('more-click')
}
</script>

<style scoped>
.input-toolbar {
  display: flex;
  gap: var(--spacing-mini);
}

.tool-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--border-radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-secondary);
  transition: all var(--transition-duration) var(--transition-timing-function);
}

.tool-btn:hover {
  background-color: var(--background-color-tertiary);
  color: var(--text-color-primary);
  transform: scale(1.05);
}

.tool-btn:active {
  transform: scale(0.95);
}

/* 深色主题适配 */
[data-theme='dark'] .tool-btn {
  color: var(--text-color-tertiary);
}

[data-theme='dark'] .tool-btn:hover {
  background-color: var(--background-color-secondary);
  color: var(--text-color-primary);
}
</style>
